import { getGoodsDetail } from '@/api/goodsDetail'
import { GoodsDetail } from '@/types/goodsDetail'
import React, { useEffect, useState } from 'react'
import { useSearchParams, useNavigate } from 'react-router-dom'

import { NavBar, Swiper, ImageViewer, Tag, Button } from 'antd-mobile'
import {
  MessageOutline,
  TruckOutline,
  FingerdownOutline
} from 'antd-mobile-icons'

import styles from './index.module.scss'
import { useFormatPrice } from '@/hooks/formatPrice'
import { Cart } from '@/types/cart'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/store'
import { setCartList } from '@/store/modules/cart'

export default function GoodsDetailIndex () {
  // 获取到首页传递的参数
  const [params] = useSearchParams()
  const proid = params.get('proid')!

  const navigate = useNavigate()
  const dispatch = useDispatch()
  const formatPrice = useFormatPrice()

  const [goodsDetail, setGoodsDetail] = useState({} as GoodsDetail)
  const [bannerList, setBannerList] = useState([] as string[])
  const cartList = useSelector((state: RootState) => state.cart.cartList)

  const getGoodsDetailData = async () => {
    const res = await getGoodsDetail(proid)
    setGoodsDetail(res.data)
    setBannerList(res.data.banners[0].split(','))
    console.log('---goods---', goodsDetail)
    console.log('---banner---', bannerList)
  }
  useEffect(() => {
    getGoodsDetailData()
  }, [])

  // 点击返回
  const back = () => {
    navigate('/home')
  }

  // 点击加入购物车
  const addToCart = () => {
    const goods: Cart = {
      id: proid,
      img: goodsDetail.img2,
      isChecked: true,
      name: goodsDetail.proname,
      number: 1,
      price: goodsDetail.originprice
    }
    dispatch(setCartList(goods))
  }

  // 点击跳转购物车
  const skipTo = () => {
    navigate('/cart')
  }

  const items = bannerList.map((item, i) => {
    return (
      <Swiper.Item key={item}>
        <div className={styles.content}>
          <img
            src={item}
            style={{ width: '100%', height: '100%' }}
            // onClick={() => setVisible(true)}
            onClick={() => {
              return ImageViewer.Multi.show({
                defaultIndex: i,
                images: bannerList
              })
            }}
          />
        </div>
      </Swiper.Item>
    )
  })

  // 徽标
  const count = cartList
    // .filter(item => item.isChecked)
    .reduce((prev, item) => {
      return prev + item.number
    }, 0)

  console.log()
  return (
    <div className={styles.content}>
      <NavBar onBack={back} style={{ backgroundColor: 'white' }}>
        {goodsDetail.proname}
      </NavBar>
      <Swiper loop autoplay style={{ '--height': '380px' }}>
        {items}
      </Swiper>
      {/* <ImageViewer.Multi
        images={bannerList}
        visible={visible}
        onClose={() => {
          setVisible(false)
        }}
        // defaultIndex={index}
      /> */}
      {/* 内容 */}
      <div className={styles.middle}>
        <Tag className={styles.tag} color='danger'>
          自营
        </Tag>
        <span style={{ fontSize: 16 }}>{goodsDetail.proname}</span>
        <div className={styles.price}>
          ￥{formatPrice(goodsDetail.originprice | 0)}
        </div>
      </div>
      {/* ActionBar */}
      <div className={styles.actionBar}>
        <div className={styles.left}>
          <span>
            <MessageOutline fontSize={18} />
            <span>客服</span>
          </span>
          <span style={{ position: 'relative' }}>
            <TruckOutline fontSize={18} />
            <span onClick={skipTo}>购物车</span>
            <span className={styles.badge}>{count ? count : ''}</span>
          </span>
          <span>
            <FingerdownOutline fontSize={18} />
            <span>店铺</span>
          </span>
        </div>
        <div className={styles.right}>
          <Button color='warning' shape='rectangular' onClick={addToCart}>
            加入购物车
          </Button>
          <Button color='danger' shape='rectangular'>
            立即购买
          </Button>
        </div>
      </div>
    </div>
  )
}
